<template>
  <!-- 至少要加一个父标签 -->
  <div class="container">
    <!-- 头部 -->
    <header>
      <!-- 选择 -->
      <select class="fl">
        <option>成都</option>
        <option>广州</option>
        <option>北京</option>
      </select>
      <!-- 输入框 搜索 -->
      <div class="search fl">
        <!-- <input type="image" src="images/ss.jpg">
        <input type="text" name="search" placeholder="寻找您的爱巢">-->
        <a href="brand.html">
          <img src="images/ss.png" />
          <span>寻找您的爱巢</span>
        </a>
      </div>
      <!-- 扫码 -->
      <img class="fr" src="images/shaoma.jpg" />
      <div class="clear"></div>
    </header>
    <div :class="weather"></div>
    <!-- 广告 轮播 -->
    <section class="banner">
      <div v-swiper:mySwiper="swiperOption">
        <div class="swiper-wrapper">
          <div class="swiper-slide" :key="banner.hid" v-for="banner in banners">
            <!-- <img src="images/banner1.jpg" /> -->
            <img :src="banner.imgUrl" alt />
          </div>
        </div>
        <!-- 分页器 -->
        <div class="swiper-pagination"></div>
      </div>
    </section>
    <nav class="navtop">
      <ul>
        <li>
          <a href="#">
            <img src="images/logo1.jpg" />
            <p>整租</p>
          </a>
        </li>
        <li>
          <a href="#">
            <img src="images/logo2.jpg" />
            <p>合租</p>
          </a>
        </li>
        <li>
          <a href="#">
            <img src="images/logo3.jpg" />
            <p>资讯</p>
          </a>
        </li>
        <li>
          <a href="#">
            <img src="images/logo1.jpg" />
            <p>新房源</p>
          </a>
        </li>
      </ul>
    </nav>
    <section class="content">
      <h1>本期优选</h1>
      <div class="select">
        <div class="left fl">
          <img src="images/1.jpg" />
        </div>
        <div class="right fr">
          <img src="images/2.jpg" />
          <img src="images/3.jpg" />
        </div>
        <div class="clear"></div>
      </div>
      <h1>
        周边推荐
        <a href="#" class="fr">更多></a>
      </h1>
      <!-- <img src="images/4.jpg"> -->
      <div class="map" id="allmap" style="width: 100%;height: 3.29rem;overflow: hidden;margin:0"></div>
      <h1>精选好房</h1>
      <ul class="c">
        <li>
          区域
          <span class="icon">&#xe6aa;</span>
        </li>
        <li>
          租金
          <span class="icon">&#xe6aa;</span>
        </li>
        <li>
          户型
          <span class="icon">&#xe6aa;</span>
        </li>
        <li>
          筛选
          <span class="icon">&#xe6aa;</span>
        </li>
      </ul>
      <ul class="case">
        <li v-for="house in bestHouse" :key="house.hid">
          <!-- <a href="homedetails.html"> -->
          <router-link :to="/detail/+house.hid">
            <img :src="house.cover" class="fl" />
            <div class="text fr">
              <h1>{{house.name}}</h1>
              <p>{{house.desc}}</p>
              <ul>
                <li v-for="(item,key) in house.tag" :key="key" :class="item.status">{{item.name}}</li>
              </ul>
              <p>
                {{house.rentMoney}}
                <span>元/月</span>
              </p>
            </div>
          </router-link>
          <!-- </a> -->
        </li>
      </ul>
      <div class="loadmore" @click="loadMore">...加载更多</div>
    </section>
  </div>
</template>
<script type="text/ecmascript-6">
//获取封装好的请求数据函数
// import BMap from "BMap";
import { getIndexBanner, getBestHouse } from "../network/index.js";
export default {
  // 组件名称
  name: "index",
  // 加载子组件（页面分离的内容）
  components: {},
  data() {
    return {
      // 定义变量
      banners: [],
      swiperOption: {
        pagination: {
          el: ".swiper-pagination",
        },
        loop: true,
        autoplay: {
          delay: 2000,
          stopOnLastSlide: false,
          disableOnInteraction: false,
        },
      },
      weather: "weather",
      bestHouse: [],
      bestHouseAll: [],
      page: 1, //页码
    };
  },
  // 生命周期
  mounted() {
    //请求获取顶部轮播信息
    getIndexBanner("/data/ad_data.json")
      .then((data) => {
        if (data.data.code == 200) {
          this.banners = data.data.data;
        } else {
          return "error";
        }
      })
      .catch(() => console.log("error"));
    // 请求好房推荐信息
    getBestHouse("/data/house_data.json")
      .then((res) => {
        let data = res.data;
        if (data.code == 200) {
          this.bestHouseAll = data.bestHouse;
          this.bestHouse = this.bestHouseAll.slice(0, 3);
        } else {
          return "error";
        }
      })
      .catch(() => console.log("err"));
    this.map();
  },
  created() {},
  updated() {},
  destroyed() {},
  methods: {
    // 事件的函数（写方法格式）
    loadMore() {
      if (this.bestHouse.length < this.bestHouseAll.length) {
        this.page++;
        this.bestHouse = this.bestHouseAll.slice(0, 3 * this.page);
      }
    },
    map() {
      var map = new window.BMap.Map("allmap");
      var point = new window.BMap.Point(116.331398, 39.897445);
      map.centerAndZoom(point, 12);
      // window.map = map;
      var geolocation = new window.BMap.Geolocation();
      geolocation.getCurrentPosition(
        function (r) {
          if (this.getStatus() == 200) {
            var mk = new window.BMap.Marker(r.point);
            map.addOverlay(mk);
            map.panTo(r.point);
            // alert('您的位置：'+r.point.lng+','+r.point.lat);
          } else {
            // alert('failed'+this.getStatus());
          }
        },
        { enableHighAccuracy: true }
      );
    },
  },
  computed: {
    // 计算属性（定义变量，跟data不一样，可以对变量的值进行更多的赋值操作）
  },
  watch: {
    // 监听变量的改变（会自动更新变量的值）
  },
};
</script>

<style src="../assets/css/index.css" scoped></style>
<style scoped>
@import url("../assets/css/weather.css");
.loadmore {
  text-align: center;
  font-size: 0.3rem;
  cursor: pointer;
}
</style>
